import React, { useEffect, useContext } from 'react'
import { Image, List } from 'antd-mobile'
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom/dist';
import socket from '../../socket';
import storage from '../../utils/storage';
import { LeftOutline } from 'antd-mobile-icons'
import './send.scss'
export default function Chatting() {

    const nav = useNavigate()
    const selfInfo = storage.get('selfInfo')

    const friends = useSelector(state => state.userinfo.friends)
console.log(friends);
    useEffect(() => {
        socket.emit('saveSocketId',selfInfo.account)
    }, [])
    return (
        <div className='chatting_bgc'>
            <div className="head">
                <LeftOutline onClick={() => { nav(-1) }} className='left' />
                <span>消息中心</span>
            </div>
            <List header='用户列表'>
                {friends.map(user => {
                    return <List.Item
                        onClick={() => {
                           
                            socket.emit('getPrivateHistory', { selfaccount: selfInfo.account, otheraccount: user.otheraccount })

                            nav('/chatting', { state: { user: user } })
                            sessionStorage.setItem('toUser', JSON.stringify(user))
                        }}
                        key={user.latestmsg.time}
                        prefix={
                            <Image
                                src={user.otheravatar}
                                style={{ borderRadius: 20 }}
                                fit='cover'
                                width={40}
                                height={40}
                            />
                        }
                        description={user.latestmsg.time + ' ' + user.latestmsg.content}
                    >
                        {user.othername}
                    </List.Item>
                })}
            </List>

        </div>
    )
}
